<template>
  <div id="app">
    <div class="layout height" v-show="!hideSide">
      <Layout class="height">
          <Sider ref="siderRef" hide-trigger collapsible :collapsed-width="78" :width="250" v-model="isCollapsed" class="siderClass">
            <div>
              <a href="/">
                <img :src="this.isCollapsed?'/menu_logo2.png':'/menu_logo.png'" :class="this.isCollapsed?'menuLogoClass2':'menuLogoClass'">
              </a>
            </div>
            <Menu :active-name="activeName" theme="dark" width="auto" :class="menuitemClass">
              <MenuItem :name="datasIndex" v-for="(item, datasIndex) in menuData" :key="datasIndex" @click.native="menuClick(item)">
                <Icon :type="item.icon"></Icon>
                <span>{{item.name}}</span>
              </MenuItem>
            </Menu>
          </Sider>
          <Layout>
            <Header :style="{padding: 0}" class="layout-header-bar" >
                <!-- <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"/> -->
                <Dropdown style="float: right;margin-right: 50px;">
                  <div class="userClass">
                    <Icon type="logo-android" style="font-size: 23px;color: #20b84a;"/>
                    {{this.$store.state.account}}
                  </div>
                  <DropdownMenu slot="list">
                    <DropdownItem @click="signOut">
                      <Button icon="ios-log-out" type="text" class="unifiedClass" @click="signOut">退出登录</Button>
                    </DropdownItem>
                  </DropdownMenu>
              </Dropdown>
            </Header>
            <Content class="appContentClass">
              <router-view />
            </Content>
          </Layout>
      </Layout>
    </div>
    <router-view v-show="hideSide"/>
  </div>
</template>
<script>
import Cookies from 'js-cookie'

export default {
    data () {
      return {
        activeName: 0,
        isCollapsed: false,
        hideSidePath: '/writeArticle,/login',
        menuData: [
          {icon: 'ios-home-outline', name:'首页', path:'/'},
          {icon: 'md-book', name:'发布文章', path:'/article'},
          {icon: 'ios-people', name:'用户管理', path:'/user'}
        ]
      }
    },
    computed: {
      hideSide() {
        if(this.$route.path=='/') return false
        return this.hideSidePath.indexOf(this.$route.path)>-1
      },
      rotateIcon () {
        return [ 'menu-icon', this.isCollapsed ? 'rotate-icon' : '']
      },
      menuitemClass () {
        return [ 'menu-item', this.isCollapsed ? 'collapsed-menu' : '']
      }
    },
    methods: {
      signOut() {
        Cookies.remove("myToken") 
        this.$router.push('/login')
      },
      menuClick(item) {
        if(this.$route.path != item.path) this.$router.push(item.path)
      },
      collapsedSider () {
        this.$refs.siderRef.toggleCollapse();
      }
    },
    mounted() {
      this.menuData.forEach((item, index) => {
        if (item.path === this.$route.path) {
          this.activeName = index
        }
      })
    }
}
</script>
<style>
.appContentClass {
  overflow: auto;
  margin: 20px;
  background: #fff; 
  min-height: 260px; 
  border-radius: 5px;
}
.appContentClass::-webkit-scrollbar {
  width : 4px; 
  height: 1px;
}
.appContentClass::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #53535345;
}
.appContentClass::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #ededed;
}
.userClass{
  width: 70px;
  text-align: center;
  color: #515a6e;
  cursor: pointer;
  transition: all .2s ease-in-out;
}
.userClass:hover {
  background: #f8f8f9;
}
.menuLogoClass2 {
  height: 64px;
}
.menuLogoClass {
  height: 64px;
  width: 250px;
}
.siderClass {
  background: #191a23;
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
}
.layout{
  background: #f5f7f9;
  position: relative;
  overflow: hidden;
}
.layout-header-bar{
  text-align: left;
  background: #fff !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.layout-logo-left{
  width: 90%;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  margin: 15px auto;
}
.menu-icon{
  transition: all .3s;
}
.rotate-icon{
  transform: rotate(-90deg);
}
.menu-item span{
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width .2s ease .2s;
}
.menu-item i{
  transform: translateX(0px);
  transition: font-size .2s ease, transform .2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span{
  width: 0px;
  transition: width .2s ease;
}
.collapsed-menu i{
  transform: translateX(5px);
  transition: font-size .2s ease .2s, transform .2s ease .2s;
  vertical-align: middle;
  font-size: 22px;
}
.height {
  height: 100%;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  width: 100%;
}
html, body {
  height: 100%;
  width: 100%;
}
</style>
